<template>
  <Container class="giftsale-list">
    <div class="container-header title title-center" slot="header">赠品促销</div>
    <ActiveInfo></ActiveInfo>
    <div class="bg-light mt">
      <div class="container-header mt">
        <SearchSale @onSearchData="onSearchData"></SearchSale>
      </div>
      <Tabs v-model="tab">
        <template slot="extra">
          <template v-if="tab === 'tab1'">
            <Button class="item" type="primary" icon="md-add" @click="onJoinAdd">批量加入</Button>
          </template>
          <template v-if="tab === 'tab2'">
            <Button class="item" type="primary" icon="md-add" @click="onJoinDelete">批量删除</Button>
          </template>
        </template>
        <TabPane label="选择主商品" name="tab1">
          <choiceCommidy ref="choiceCommidy"></choiceCommidy>
        </TabPane>
        <TabPane :label="label1" name="tab2">
          <mainCommidy ref="mainCommidy"></mainCommidy>
        </TabPane>
      </Tabs>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button size="large" @click="jumpPrevPage">返回</Button>
      <Button type="primary" size="large" class="ml" @click="onJoinPrevent">下一步</Button>
    </div>
  </Container>
</template>
<script>
import SearchSale from "@/views/sales/common/SearchSale";
import choiceCommidy from "./list/choiceCommidy.vue";
import mainCommidy from "./list/mainCommidy.vue";
import ActiveInfo from "./edit/ActiveInfo.vue";
import { setSelectList, setCascaderList } from "./list/GiftsaleList.js";
export default {
  name: "",
  components: {
    choiceCommidy,
    mainCommidy,
    ActiveInfo,
    SearchSale
  },
  data() {
    return {
      id: this.$route.query.id || '',
      type: this.$route.query.type || '',
      tab: "tab1",
      formValidate: {
        name: "",
        date: "",
        time: "",
        interest: "",
        gender: ""
      },
      ruleValidate: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        date: [{ required: true, message: "请开始时间", trigger: "blur" }],
        time: [{ required: true, message: "请结束时间", trigger: "blur" }],
        interest: [
          { required: true, message: "请选择活动对象", trigger: "blur" }
        ]
      },
      label1: (h) => {
        return h('div', [
          h('span', '已选主商品'),
          h('Badge',{
            props: {
              count: this.getSaleNum
            }
          })
        ])
      }
    };
  },
  mounted() {
    if(this.id && !this.$store.state.giftSale.GetsaleData.length) this.getData()
  },
  methods: {
    getData() {
      this.$ajaxGet(`/activity/activity_sku_list/${this.id}`).then(data => {
        this.$store.state.giftSale.GetsaleData = (data || []).map(item => {
          return {
            id: item.item[0].productId,
            checked: false,
            buttonChecked: false,
            showChildren: false,
            discount: '',
            reduce: '',
            sale: '',
            limitQuantity: '',
            code: item.productSn,
            salePrice: '',
            reduce: '',
            stock: '',
            isShelf: item.isShelf,
            discount: '',
            title: item.title,
            productSkuList: item.item.map(todo => {
              return {
                id: todo.skuId,
                productId: todo.productId,
                productSn: todo.productSn,
                parentcode: item.productSn,
                checked: false,
                buttonChecked: false,
                showChildren: false,
                discount: '',
                reduce: '',
                sale: '',
                limitQuantity: '',
                code: todo.skuSn,
                salePrice: todo.productSkuInfo.salePrice,
                reduce: '',
                sale: todo.promotionPrice,
                stock: '',
                isShelf: todo.isShelf,
                discount: '',
                title: '',
                stock: todo.productSkuInfo.stock,
                returnPrice: ''
              }
            })
          }
        })
        this.onSearchData()
      })
    },
    onSearchData(param) {
      this.$refs.choiceCommidy.getProductData(param);
    },
    jumpPrevPage() {
      this.$router.back();
    },
    onJoinPrevent() {
      let self = this
      if(this.getSaleNum) {
        let url = {name: 'sales/gift/preventlist', query: {}}
        if (this.id) {
          url.query.id = this.id
          if (this.type) url.query.type = this.type
        }
        this.$router.push(url)
      }else{
        this.$Message.error("请选择活动商品");
      }
    },
    onJoinAdd() {
      this.$refs.choiceCommidy.getSaleData('checked')
    },
    onJoinDelete() {
      this.$refs.mainCommidy.deleteSaleData();
    }
  },
  computed: {
    getSaleNum () {
      return this.$store.getters.getGiftSaleNum
    }
  }
};
</script>
